import React from 'react';
import AliSvg from '@/components/AliSvg';

interface propsOptions {
  changeTab: (item: any) => void;
}

const Transmission = (props: propsOptions) => {
  const [tab, setTab] = React.useState({
    active: 'file',
    tabList: [
      {
        icon: 'wenjianjia',
        label: '文件',
        value: 'file',
      },
      {
        icon: 'chuanshu',
        label: '传输',
        value: 'transmission',
      },
    ],
  });

  const changeTab = (item) => {
    setTab({
      ...tab,
      active: item.value,
    });
    props.changeTab(item);
  };

  return (
    <div className="transmission">
      {tab.tabList.map((item) => {
        return (
          <div
            key={item.value}
            className={'tab-item  ' + (tab.active === item.value ? 'active' : '')}
            onClick={() => changeTab(item)}
          >
            <AliSvg href={item.icon} />
            <div className={'tab-name'}>{item.label}</div>
          </div>
        );
      })}
    </div>
  );
};

export default Transmission;
